<template>
	<view>
		<!-- 工作性质 -->
		<view class="form-line u-border-bottom" @click="showPickerNature = !showPickerNature">
			<view class="form-field">
				<view class="label">
					工作性质
				</view>
				<view :class="natureName ? 'text' : 'text ac'">
					{{natureName ? natureName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<!-- <u-field disabled required :value="natureName" label="工作性质" placeholder="请选择"
			@click="showPickerNature = !showPickerNature" class="form_choose reset_after" /> -->
			
		<u-picker v-model="showPickerNature" mode="selector" range-key="text" :default-selector="[natureDefaultIndex]" :range="columnsNature"
			:default-index="natureDefaultIndex" @confirm="onConfirmNature" @cancel="showPickerNature = false" />
		<!-- 职位 -->
		<view class="form-line u-border-bottom form_choose reset_after" @click.native="showPickerJobCategory = !showPickerJobCategory">
			<view class="form-field">
				<view class="label">
					期望职位
				</view>
				<view :class="categoryName ? 'text' : 'text ac'">
					{{categoryName ? categoryName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-popup v-model="showPickerJobCategory" mode="bottom" height="900rpx" width="100%" ref="dropCategory"
			@click-overlay="handleCategoryOverlay" @opened="openedCategory">
			<JobCategoryFilter :categories="[category1, category2, category3]" :type="false"
				@doSelect="doSelectCategory"></JobCategoryFilter>
		</u-popup>
		<!-- 地区 -->
		<view class="form-line u-border-bottom form_choose reset_after" @click.native="showPickerDistrict = !showPickerDistrict">
			 <view class="form-field">
			 	<view class="label">
			 		期望地区
			 	</view>
			 	<view :class="districtName ? 'text' : 'text ac'">
			 		{{districtName ? districtName : '请选择'}}
			 	</view>
			 </view>
			 <u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		
		<u-popup v-model="showPickerDistrict" mode="bottom" height="900rpx" width="100%" ref="dropDistrict"
			@click-overlay="handleDistrictOverlay" @opened="openedDistrict">
			<DistrictFilter :districts="[district1, district2, district3]" :type="false" @doSelect="doSelectDistrict">
			</DistrictFilter>
		</u-popup>
		<!-- 薪资 -->
		<view class="form-line u-border-bottom form_choose reset_after" @click.native="showPickerWage = !showPickerWage" >
			<view class="form-field">
				<view class="label">
					期望薪资
				</view>
				<view :class="wageName ? 'text' : 'text ac'">
					{{wageName ? wageName : '请选择'}}
				</view>
			</view>
			 <u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		
		<!-- 期望行业 -->
		<view v-if="fieldStore.intention.trade.is_display" class="form-line u-border-bottom " @click="showPickerTrade = !showPickerTrade" >
			<view class="form-field">
				<view class="label" :class="fieldStore.intention.trade.is_require === 1 ? '' : 'no'">
					{{fieldStore.intention.trade.field_cn}}
				</view>
				<view :class="tradeName ? 'text' : 'text ac'">
					{{tradeName ? tradeName : '请选择'}}
				</view>
			</view>
			 <u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		
		<u-select
		:default-value="[wageDefaultIndex1,wageDefaultIndex2]"
		v-model="showPickerWage" 
		mode="mutil-column-auto" 
		:list="columnsWage" 
		@confirm="onConfirmWage"
		@cancel="showPickerWage = false" 
		>
		</u-select>
			
		<u-picker v-model="showPickerTrade" range-key="text" mode="selector" :range="columnsTrade" :default-index="tradeDefaultIndex"
			@confirm="onConfirmTrade" @cancel="showPickerTrade = false" />

		<view style="margin: 32rpx 32rpx 0;">
			<u-button shape="circle" type="primary" :disabled="disabled" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<view class="box_1" v-if="parseInt(id) > 0" @click="delIntentionModal = true">
			删除此求职意向
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="delIntentionModal" title="提示" content="确定删除该条求职意向吗" show-cancel-button
			@confirm="deleteCurrentIntention" @cancel="delIntentionModal=false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import JobCategoryFilter from '@/components/JobCategoryFilter'
	import DistrictFilter from '@/components/DistrictFilter'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'EditIntention',
		components: {
			JobCategoryFilter,
			DistrictFilter
		},
		data() {
			return {
				delIntentionModal: false,
				tradeDefaultIndex: 0,
				wageStart: this.$store.state.minWage,
				wageDefaultIndex1: 0,
				wageDefaultIndex2: 0,
				pickerWage: '',
				natureDefaultIndex: '',
				showPickerTrade: false,
				showPickerWage: false,
				showPickerDistrict: false,
				showPickerJobCategory: false,
				showPickerNature: false,
				id: 0,
				district1: '',
				district2: '',
				district3: '',
				district: '',
				districtName: '',
				category1: '',
				category2: '',
				category3: '',
				categoryName: '',
				minwage: '',
				maxwage: '',
				wageName: '',
				nature: '',
				natureName: '',
				trade: '',
				tradeName: '',
				disabled:false
			}
		},
		async created() {
			this.getClassifyTrade()
			this.getClassifyResumeNature()
			this.getClassifyJobcategory()
			this.getClassifyCitycategory()
			this.getClassifyWage()
			await http.get(api.editResume).then(res => {
				if (parseInt(res.data.code) === 200) {
					// 更新简历字段列表
					this.$store.dispatch('setFieldList', res.data.data.field_rule)
				}
			})
		},
		onLoad(e) {
			this.id = e.id
		},
		mounted(e) {
			// 获取路由中的id
			this.$nextTick(() => {
				if (this.id > 0) {
					// 如果有id，根据id取出对应的求职意向
					let thisIntention = this.intentionStore.filter(
						item => parseInt(item.id) === parseInt(this.id)
					)
					this.initData(thisIntention[0])
					// 恢复工作性质
					this.natureDefaultIndex = this.columnsNature.findIndex(item => {
						return parseInt(item.id) === parseInt(this.nature)
					})
					let _this = this
					// 恢复薪资
					let pickerWage = this.$store.state.classifyWage
					Object.keys(pickerWage).forEach(function(key, index) {
						if (parseInt(key) === parseInt(_this.minwage)) {
							_this.wageDefaultIndex1 = index
							_this.wageStart = _this.minwage
							_this.wageDefaultIndex2 = pickerWage[key].findIndex(
								item => parseInt(item) === _this.maxwage
							)
						}
					})
					// 恢复期望行业
					this.tradeDefaultIndex = this.columnsTrade.findIndex(item => {
						parseInt(item.id) === parseInt(this.trade)
					})
				}
			})
		},
		computed: {
			...mapState({
				columnsNature: state => state.classifyResumeNature,
				areaDistrict: state => state.classifyCityCategory,
				columnsTrade: state => state.classifyTrade,
				intentionStore: state => state.resume.intention_list,
				fieldStore: state => state.resume.field_rule
			}),
			columnsWage() {
				var classifyWage1 = this.$store.state.classifyWage
				var index1 = 0
				var list1 = []
				for (let key in classifyWage1) {
					index1++
					list1.push({
						value: index1,
						label: key,
						children2:classifyWage1[key]
					})
				}
				for (var i = 0; i < list1.length; i++) {
					let children = list1[i].children2
					let item = list1[i]
					if(children.length > 0){
						var item2 = []
						for (var i2 = 0; i2 < children.length; i2++) {
							item2.push({
								value: item.value + '-' + (i2 + 1),
								label: children[i2],
							}) 
							list1[i].children = item2
						}
					} else {
						list1[i].children = []
					}
				}
				return list1
				// return [
				// 	Object.keys(this.$store.state.classifyWage),
				// 	this.$store.state.classifyWage[this.wageStart]
				// ]
			},
		},
		methods: {
			async getClassifyTrade () {
				await this.$store.dispatch('getClassify', 'trade')
			},
			async getClassifyResumeNature () {
				await this.$store.dispatch('getClassify', 'resumeNature')
			},
			async getClassifyJobcategory () {
				await this.$store.dispatch('getClassify', 'jobcategory')
			},
			async getClassifyCitycategory () {
				await this.$store.dispatch('getClassify', 'citycategory')
			},
			async getClassifyWage () {
				await this.$store.dispatch('getClassifyWage')
			},
			doSelectCategory(data) {
				this.category1 = data[0]
				this.category2 = data[1]
				this.category3 = data[2]
				this.categoryName = data[3]
				this.showPickerJobCategory = !this.showPickerJobCategory
			},
			doSelectDistrict(data) {
				this.district1 = data[0]
				this.district2 = data[1]
				this.district3 = data[2]
				this.districtName = data[3]
				this.showPickerDistrict = !this.showPickerDistrict
			},
			handleCategoryOverlay() {
				this.$refs.dropCategory.$children[0].handleSecondOverlay()
			},
			handleDistrictOverlay() {
				this.$refs.dropDistrict.$children[0].handleCityOverlay()
			},
			// 职位分类筛选打开之后给筛选组件赋值
			openedCategory() {
				this.$refs.dropCategory.$children[0].initData()
				setTimeout(() => {
					this.dynamicAssignFun(this.$refs.dropCategory)
				}, 300)
			},
			// 地区筛选打开之后给筛选组件赋值
			openedDistrict() {
				this.$refs.dropDistrict.$children[0].initData()
				setTimeout(() => {
					this.dynamicAssignFun(this.$refs.dropDistrict)
				}, 300)
			},
			// 动态赋值筛选组件公用方法
			dynamicAssignFun(obj) {
				let popHeight = obj.$el.clientHeight
				if (obj.$children[0]) {
					obj.$children[0].layHeight = popHeight
					let offTop = obj.$el.offsetTop
					obj.$children[0].offTop = parseInt(parseInt(offTop) + parseInt(popHeight) / 2)
				}
			},
			// 初始化接口返回数据
			initData(interfaceIntention) {
				this.nature = interfaceIntention.nature
				this.natureName = interfaceIntention.nature_text
				this.category1 = interfaceIntention.category1
				this.category2 = interfaceIntention.category2
				this.category3 = interfaceIntention.category3
				this.categoryName = interfaceIntention.category_text
				this.district1 = interfaceIntention.district1
				this.district2 = interfaceIntention.district2
				this.district3 = interfaceIntention.district3
				this.district = interfaceIntention.district
				this.districtName = interfaceIntention.district_text
				this.minwage = interfaceIntention.minwage
				this.maxwage = interfaceIntention.maxwage
				this.wageName = `${parseInt(this.minwage)}-${parseInt(this.maxwage)}元`
				this.trade = interfaceIntention.trade
				this.tradeName = interfaceIntention.trade_text
			},
			// 选择工作性质
			onConfirmNature(value) {
				if(value[0] == ''){
					this.nature = this.columnsNature[0].id
					this.natureName = this.columnsNature[0].text
					this.showPickerNature = !this.showPickerNature
				} else {
					this.nature = this.columnsNature[value].id
					this.natureName = this.columnsNature[value].text
					this.showPickerNature = !this.showPickerNature
				}
			},
			// 选择期望地区
			onConfirmDistrict(value) {
				this.district1 = value[0].code
				this.district2 = value[1] ? value[1].code : ''
				this.district3 = value[2] ? value[2].code : ''
				this.districtName =
					`${value[0].name}${value[1] ? '/' + value[1].name : ''}${value[2] ? '/' + value[2].name : ''}`
				this.showPickerDistrict = !this.showPickerDistrict
			},
			// 选择期望薪资
			onConfirmWage(values) {
				var [columnObj1,columnObj2] = values
				this.minwage = parseInt(columnObj1.label)
				this.maxwage = parseInt(columnObj2.label)
				this.wageName = `${parseInt(columnObj1.label)}-${parseInt(columnObj2.label)}元`
				for (var i = 0; i < this.columnsWage.length; i++) {
					let item = this.columnsWage[i]
					if(columnObj1.label == item.label){
						for (var i2 = 0; i2 < item.children.length; i2++) {
							let item2 = item.children[i2]
							if(columnObj2.label == item2.label){
								this.wageDefaultIndex1 = i
								this.wageDefaultIndex2 = i2
							}
						}
					}
				}
				this.showPickerWage = !this.showPickerWage
			},
			// 薪资级联
			// onChangeWage(values) {
			// 	let {
			// 		column,
			// 		index
			// 	} = values
			// 	if (!column) {
			// 		let values = parseInt(this.columnsWage[column][index])
			// 		this.$set(this.columnsWage, 1, this.$store.state.classifyWage[values])
			// 		this.$forceUpdate();
			// 	}
			// },
			// 选择期望行业
			onConfirmTrade(value) {
				this.trade = this.columnsTrade[value[0]].id
				this.tradeName = this.columnsTrade[value[0]].text
				this.showPickerTrade = !this.showPickerTrade
			},
			// 保存
			handleSubmit() {
				if (!this.nature) {
					this.$refs.uTips.show({
						title: '请选择工作性质',
						type: 'error'
					})
					return false
				}
				if (!this.category1) {
					this.$refs.uTips.show({
						title: '请选择期望职位',
						type: 'error'
					})
					return false
				}
				if (!this.district1) {
					this.$refs.uTips.show({
						title: '请选择期望地区',
						type: 'error'
					})
					return false
				}
				if (!this.minwage || !this.maxwage) {
					this.$refs.uTips.show({
						title: '请选择薪资',
						type: 'error'
					})
					return false
				}
				if (this.fieldStore.intention.trade.is_require) {
					if (!this.trade) {
						this.$refs.uTips.show({
							title: `请选择${this.fieldStore.intention.trade.field_cn}`,
							type: 'error'
						})
						return false
					}
				}
				this.disabled = true
				http
					.post(api.resume_intention_save, {
						id: this.id,
						district1: this.district1,
						district2: this.district2,
						district3: this.district3,
						category1: this.category1,
						category2: this.category2,
						category3: this.category3,
						minwage: this.minwage,
						maxwage: this.maxwage,
						nature: this.nature,
						trade: this.trade
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
						this.disabled = false
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 删除此条求职意向
			deleteCurrentIntention() {
				// 确定按钮
				http
					.post(api.resume_intention_delete, {
						id: this.id
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							}, 2000)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		width: 100%;
		padding: 30rpx 0;
	}
</style>
